<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>文章新增</title>
    <link rel="stylesheet" href="./libs/bootstrap/css/bootstrap.min.css" />
    <link rel="stylesheet" href="./css/reset.css" />
    <link rel="stylesheet" href="./css/iconfont.css" />
    <link rel="stylesheet" href="./css/main.css" />
    <link rel="stylesheet" href="./libs/layui/css/layui.css" />
    <!-- <link
      rel="stylesheet"
      href="./libs/layui/css/modules/layer/default/layer.css"
    /> -->
    <!-- jq -->
    <script src="./libs/jquery/jquery.min.js"></script>
    <script src="./js/jqconfig.js"></script>
    <script src="./libs/tinymce_5.5.1/tinymce.min.js"></script>
    <script src="./libs/layui/layui.js"></script>
    <script src="./libs/art-template/template-web.js"></script>

    <!-- <script src="./libs/layui/lay/modules/layer.js"></script> -->
  </head>

  <body>
    <div class="container-fluid">
      <div class="common_title">文章编辑</div>
      <div class="container-fluid common_con">
        <form class="form-horizontal article_form" id="form">
          <div class="form-group">
            <label for="inputTitle" class="col-sm-2 control-label"
              >文章标题：</label
            >
            <div class="col-sm-10">
              <input
                type="text"
                name="title"
                required
                class="form-control title"
                id="inputTitle"
                placeholder="文章标题文字"
              />
            </div>
          </div>
          <div class="form-group">
            <label for="inputCover" class="col-sm-2 control-label"
              >文章封面：</label
            >
            <div class="col-sm-10">
              <img id="coverimg" src="./images/2.jpg" class="article_cover" />
              <input
                name="cover"
                type="file"
                id="inputCover"
                onchange="changeCoverImage(this.files)"
              />
            </div>
          </div>
          <div class="form-group">
            <label for="inputCategory" class="col-sm-2 control-label"
              >文章类别：</label
            >
            <div class="col-sm-4">
              <select
                id="category"
                class="form-control category"
                name="categoryId"
              ></select>
            </div>
          </div>
          <div class="form-group">
            <label class="col-sm-2 control-label">发布时间：</label>
            <div class="col-sm-4">
              <input
                id="articleDate"
                name="date"
                class="jeinput form-control title"
                type="text"
                placeholder="请选择发布日期"
                readonly
              />
            </div>
          </div>
          <div class="form-group">
            <label for="inputEmail3" class="col-sm-2 control-label"
              >文章内容：</label
            >
            <div class="col-sm-10">
              <!-- 富文本编辑区域 -->
              <textarea id="articleContent"></textarea>
            </div>
          </div>
          <div class="form-group">
            <div class="col-sm-offset-2 col-sm-10">
              <button
                type="button"
                class="btn btn-success btn-edit"
                onclick="saveArticle(state='已发布')"
              >
                发布
              </button>
              <button
                type="button"
                class="btn btn-default btn-draft"
                onclick="saveArticle(state='')"
              >
                存为草稿
              </button>
            </div>
          </div>
        </form>
      </div>
    </div>
    <script id="art_category" type="text/html">
      {{each data}}
      <option value="{{$value.id}}">{{$value.name}}</option>
      {{/each}}
    </script>
    <script>
      //获取当前页面的id
      let params_id = location.href.split("=")[1];
      //   alert(params_id);
      layui.use("laydate", function () {
        let laydate = layui.laydate;

        //执行一个laydate实例
        laydate.render({
          elem: "#articleDate", //指定元素
          type: "datetime",
        });
        getCateList();
        initTiny();
      });
      //获取文章所有类别
      function getCateList() {
        $.ajax({
          type: "get",
          url: "/admin/category/list",

          success: (res) => {
            // console.log(res);
            $("#category").html(template("art_category", res));
          },
        });
      }
      //文本域 富文本编辑器
      function initTiny() {
        tinymce.init({
          selector: "#articleContent",
          language: "zh_CN",
          setup: function (editor) {
            editor.on("init", () => {
              getCateById();
            });
          },
        });
      }
      //图片
      function changeCoverImage() {
        const file = $("#inputCover")[0].files[0];
        // console.log(file);
        const url = URL.createObjectURL(file);
        $("#coverimg").prop("src", url);
      }
      //根据id初始化页面元素
      function getCateById() {
        let id = params_id;
        $.ajax({
          type: "get",
          url: "/admin/article/search",
          data: { id },
          success: (res) => {
            // console.log(res);
            const { content, title, cover, categoryId, date } = res.data;
            $("#inputTitle").val(title);
            $("#coverimg").prop("src", cover);
            $("#category").val(categoryId);
            $("#articleDate").val(date);
            tinyMCE.editors["articleContent"].setContent(content);
          },
        });
      }
      //发布功能
      function saveArticle(state) {
        //获取id
        let id = params_id;
        let title = $("#inputTitle").val();
        let cover = document.querySelector("#inputCover").files[0];
        let categoryId = $("#category").val();
        let date = $("#articleDate").val();
        let content = tinyMCE.editors["articleContent"].getContent();
        // console.log(id, title, cover, categoryId, date, content, state);
        let fd = new FormData();
        fd.append("title", title);
        fd.append("cover", cover);
        fd.append("categoryId", categoryId);
        fd.append("date", date);
        fd.append("id", id);
        fd.append("content", content);
        fd.append("state", state);
        $.ajax({
          type: "post",
          url: "/admin/article/edit",
          data: fd,
          contentType: false,
          processData: false,
          success: (res) => {
            // console.log(res);

            location.href = "./article_list.html";
          },
        });
      }
    </script>
  </body>
</html>
